<template>
	<view class="oppo-box">


		<view class="TopNavigationBar">
			<view class="title" :class="titleActive == index ? 'active' : ''" v-for="(item,index) in tiileArr"
				style="margin-left:6%;" @click="onTitleT(index,item.id)">
				{{item.title}}
			</view>
			<view class="search">
				<u-search input-align="center" height="18" shape="round" placeholder=" " margin="8rpx"
					:show-action="false" color="#ffffff" bg-color="#777777" v-model="search"
					@change="onChange"></u-search>
			</view>
		</view>
		<view class="content">
			<view class="title" v-for="(item,index) in newsArr" v-if="titleActive == 0">
				<image class="img" :src="item.imgHand" @click="goDetails(item)"></image>
				<view class="videoName">
					{{item.videoName}}
				</view>
			</view>
			<view class="title" v-for="(item,index) in hotArr" v-if="titleActive== 1">
				<image class="img" :src="item.imgHand" @click="goDetails(item)"></image>
				<view class="videoName">
					{{item.videoName}}
				</view>
			</view>

			<view class="leftNavigation" v-if="titleActive== 2">
				<view class="text" :class="contentTitleActive == index ? 'active' : ''"
					v-for="(item,index) in classifyNavigation" @click="onTitleC(index)">
					{{item.typeName}}
				</view>
			</view>
			<view class="boxImg" v-for="(item,index) in classifyArr" v-if="titleActive== 2">
				<image class="Img" :src="item.imgHand" @click="goDetails(item)"></image>
				<view class="videoName">
					{{item.videoName}}
				</view>
			</view>

			<view class="title" v-for="(item,index) in searchArr" v-if="titleActive == 3">
				<image class="img" :src="item.imgHand" @click="goDetails(item)"></image>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		findVideoMainByPage,
		findVideoMainHotByPage,
		login,
		selectAll,
		findVideoMainByTypeId,
		saveHistory,
		selectLike,

	} from "../../config/api.js"
	import colorGradient from "../../uni_modules/uview-ui/libs/function/colorGradient.js";
	export default {
		data() {
			return {

				tiileArr: [{
						id: 1,
						title: "最新"
					},
					{
						id: 2,
						title: "热门"
					},
					{
						id: 3,
						title: "类别"
					}
				],

				newsArr: [], // 最新 用于渲染页面
				newsDownArr: [],
				classifyArr: [], // 分类  用于渲染页面
				classyArr: [],
				hotArr: [], //热门 用于渲染页面
				imgseArr4: {}, //content数组信息，用于渲染页面
				classifyNavigation: [],
				titleActive: 0, //标题判断用
				contentTitleActive: 0, //分类标题判断用
				id: 1,
				page: 1, //当前页码
				limit: 10, //每页显示多少条
				count: 0, // 总条数

				typeId: 1,
				detail: {},
				search: null, //搜索内容
				searchArr: [],



			};
		},

		onShow() {
			this.newsArr = []
			this.contentAll();
			this.leftNavigation();
		},
		onPullDownRefresh() {
			let that = this
			this.searchArr = [];
			this.newsArr = []
			this.hotArr = []
			this.classifyArr = []
			this.page = 1
			if (this.titleActive == 0) {
				this.contentAll();
			}

			if (this.titleActive == 1) {
				this.findVideoMainHotByPageFun();
			}
			if (this.titleActive == 2) {
				this.leftNavigationcontent();
			}

			if (this.titleActive == 3) {
				this.selectLikeFun();
			}

		},
		onReachBottom() {

			let that = this
			//总页码  总有多少页
			let totalPageNumber = Math.ceil(this.count * 1.0 / this.limit);
			if (this.page < totalPageNumber) {
				this.page = this.page + 1
			} else {
				return;
			}
			if (this.titleActive == 0) {

				this.contentAll();
			}
			if (this.titleActive == 1) {

				this.findVideoMainHotByPageFun();
			}
			if (this.titleActive == 2) {


				this.leftNavigationcontent();
			}
			if (this.titleActive == 3) {

				this.selectLikeFun();
			}


		},
		methods: {

			onChange() {
				let that = this
				this.searchArr = [];
				this.selectLikeFun();
				this.titleActive = 3;


			},
			selectLikeFun() {
				let that = this;
				//往后端传的参数
				let param = {
					page: that.page,
					limit: that.limit,
					videoName: that.search
				}
				selectLike({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {

					for (var i = 0; i < res.data.length; i++) {
						that.searchArr.push(res.data[i])
					}
				}).catch((e) => {})
			},

			onTitleT(e) {
				this.page = 1;


				this.titleActive = e;
				console.log(e);
				if (e == 0) {
					this.contentAll();
					this.searchArr = [];
					this.newsArr = []
					this.hotArr = []
					this.classifyArr = []
				}
				if (e == 1) {
					this.findVideoMainHotByPageFun();
					this.searchArr = [];
					this.newsArr = []
					this.hotArr = []
					this.classifyArr = []
				}
				if (e == 2) {
					this.leftNavigationcontent();
					this.searchArr = [];
					this.newsArr = []
					this.hotArr = []
					this.classifyArr = []
				}

			},
			onTitleC(e) {

				this.classifyArr = [];
				this.page = 1;
				this.contentTitleActive = e;
				this.typeId = e + 1;
				this.leftNavigationcontent();
				console.log("数组:", this.classifyArr);
			},
			// 导航详情页面点击事件
			goDetails(e) {
				console.log("eeeeeeeeeee", e);
				uni.navigateTo({
						url: "/pages/details/details?id=" + e.id,
					}),
					this.detail = e;
				this.saveHistoryFun();
			},

			findVideoMainHotByPageFun() {
				let that = this;
				//往后端传的参数
				let param = {
					page: this.page,
					limit: this.limit
				}

				findVideoMainHotByPage({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						that.hotArr.push(res.data[i])
					}
					that.count = res.count

				}).catch((e) => {})
			},
			//最新页面接口
			contentAll() {

				let that = this;
				//往后端传的参数
				let param = {
					page: this.page,
					limit: this.limit
				}
				findVideoMainByPage({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					console.log("res=======", res);
					for (var i = 0; i < res.data.length; i++) {
						that.newsArr.push(res.data[i])
					}
					that.count = res.count


				}).catch((e) => {})
			},
			// 分类页面左侧导航接口
			leftNavigation() {
				let param = {}
				selectAll({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {

					this.classifyNavigation = res.data

				}).catch((e) => {})
			},
			// 分类页面接口
			leftNavigationcontent() {
				let that = this;
				uni.requestPayment({

				})
				//往后端传的参数
				let param = {
					page: this.page,
					limit: this.limit,
					typeId: this.typeId
				}
				findVideoMainByTypeId({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {

					that.classyArr = res.data

					for (var i = 0; i < res.data.length; i++) {
						that.classifyArr.push(res.data[i])
					}
					console.log("当前数组:", res);
					console.log("当前list", that.classifyArr);
					that.count = res.count

				}).catch((e) => {})
			},
			// 点击加入历史页面接口
			saveHistoryFun() {
				let param = {
					videoId: this.detail.id
				}
				console.log("videoId::::::::", this.detail.id);
				saveHistory(param, {
					custom: {
						auth: true
					}
				}, ).then((res) => {
					console.log("res:", res);

				}).catch(() => {
					console.log("请求失败了")
				})

			}

		}
	}
</script>

<style lang="scss">
	// .oppo-box {
	// 	width: 100vw !important;
	// 	height: 100vh !important;
	// 	overflow-x: hidden !important;
	// 	overflow-y: auto !important;
	// }


	page {
		background: #222222;
	}

	.TopNavigationBar {
		position: fixed;
		top: var(--window-top);
		left: 0;
		height: 64rpx;
		width: 750rpx;
		background: #444444;
		z-index: 10;


		.search {

			width: 260rpx;
			float: right;
			position: relative;
			/* 相对于其正常文档流进行定位 */
			right: 30rpx;

		}



		.title {
			float: left;
			font-size: 33rpx;
			color: #efeff4;
			line-height: 60rpx;
			margin-right: 0.1%;

			&.active {
				color: #e8d904;
			}
		}




	}

	.content {
		.leftNavigation {
			position: relative;
			/* 相对于其正常文档流进行定位 */
			left: 10rpx;
			width: 90rpx;
			height: 100%;
			background-color: #666666;
			float: left;
			position: fixed;
			top: var(--window-top);



			.text {
				position: relative;
				/* 相对于其正常文档流进行定位 */
				top: 25rpx;
				color: #ffffff;
				font-size: 28rpx;
				padding-left: 18rpx;
				margin-top: 50rpx;

				&.active {
					color: #e8d904;
				}
			}

		}

		.boxImg {
			float: left;
			position: relative;
			left: 78rpx;
			top: 55rpx;
			width: 300rpx;
			height: 300rpx;
			padding-top: 20rpx;
			padding-left: 30rpx;

			.Img {
				border-radius: 17%;
				width: 300rpx;
				height: 300rpx;

			}

			.videoName {
				// left: 50rpx;
				width: 150rpx;
				position: absolute;
				/* 相对于最近的定位元素进行定位 */
				top: 94%;
				/* 水平居中 */
				left: 50%;
				/* 垂直居中 */
				transform: translate(-50%, -50%);
				/* 根据自身大小调整位置 */
				padding: 10px;
				/* 内边距 */
				font-size: 13px;
				/* 字体大小 */
				color: #e3e3e3;
				/* 红色字体 */
				font-family: "SimHei", sans-serif;
				/* SimHei为黑体的名称 */
				line-height: 1.5;
				text-align: center;

			}

		}

		.title {
			float: left;
			position: relative;
			top: 60rpx;
			width: 310rpx;
			height: 330rpx;
			padding-top: 20rpx;
			margin-left: 45rpx;


			.img {
				border-radius: 17%;
				// position: relative;
				// top: 50rpx;
				// // left: 50rpx;
				width: 310rpx;
				height: 310rpx;
				// float: left;
				// // margin-top: 40rpx;
				// // margin-left: 50rpx;
				// // padding-top: 30rpx;
				// // border-radius: 30rpx 30rpx 30rpx 30rpx;
			}

			.videoName {
				width: 150rpx;
				position: absolute;
				/* 相对于最近的定位元素进行定位 */
				top: 90%;
				/* 水平居中 */
				left: 50%;
				/* 垂直居中 */
				transform: translate(-50%, -50%);
				/* 根据自身大小调整位置 */
				padding: 10px;
				/* 内边距 */
				font-size: 13px;
				/* 字体大小 */
				color: #e3e3e3;
				/* 红色字体 */
				font-family: "SimHei", sans-serif;
				/* SimHei为黑体的名称 */
				line-height: 1.5;
				text-align: center;
			}

		}

		.pagination {
			margin-top: auto;
		}


	}
</style>